<template>
	<div id="badBalance" style="height: 400px;width: 100%;"></div>
</template>
  
<script>
import * as echarts from 'echarts';
import { badAmountOrderCount } from '@/api/account'
export default {
	props:{
		badAmountList:{
			type:Object,
			default:()=>({})
		}
	},
	data() {
		return {
		}
	},
	mounted() {
		badAmountOrderCount().then((res) => {
			(function () {
				var chartDom = document.getElementById('badBalance');
			var myChart = echarts.init(chartDom);
			var option;
				option = {
				title: {
					text: '不良余额'
				},
				tooltip: {
					trigger: 'axis'
				},
				legend: {
					data: ['T_1不良余额', 'T_7不良余额', 'T_30不良余额', 'T_60不良余额', 'T_90不良余额']
				},
				grid: {
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					// data: ['2022-10-1', '2022-10-3', '2022-10-5', '2022-10-7', '2022-10-9','2022-10-1', '2022-10-3', '2022-10-5', '2022-10-7', '2022-10-9']
					data:res[0].date.split(' ')
				},
				yAxis: {
					type: 'value',
					name:'单位（元）'
				},
				series: [
					{
						name: 'T_1不良余额',
						type: 'line',
						stack: 'Total',
						data: res[1].o_1.split(' ')
					},
					{
						name: 'T_7不良余额',
						type: 'line',
						stack: 'Total',
						data: res[2].o_7.split(' ')
					},
					{
						name: 'T_30不良余额',
						type: 'line',
						stack: 'Total',
						data: res[3].o_30.split(' ')
					},
					{
						name: 'T_60不良余额',
						type: 'line',
						stack: 'Total',
						data: res[4].o_60.split(' ')
					}
					,
					{
						name: 'T_90不良余额',
						type: 'line',
						stack: 'Total',
						data: res[5].o_90.split(' ')
					}
				]};
				option && myChart.setOption(option);
			})();
		});
	},
	methods: {
	}
}
</script>
  
<style lang="scss" scoped>

</style>
  